<template>
  <div class="menu-bar">
    <transition name="slide-up">
      <div class="menu-wrapper" :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}" v-show="menuVisible">
        <div class="icon-wrapper">
          <span class="icon-menu" @click="showSetting(3)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-progress" @click="showSetting(2)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-bright" @click="showSetting(1)"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-A" @click="showSetting(0)"></span>
        </div>
      </div>
    </transition>
    <ebook-setting-font></ebook-setting-font>
    <ebook-setting-font-Popup></ebook-setting-font-Popup>
    <!--<transition name="slide-up">-->
      <!--<div class="setting-wrapper">-->
        <!--<div class="setting-font-size" v-if="showTag === 0">-->
          <!--<div class="preview" :style="{fontSize: fontSizeList[0].fontSize + 'px'}">A</div>-->
          <!--<div class="select">-->
            <!--<div class="select-wrapper" v-for="(item, index) in fontSizeList" :key="index" @click="setFontSize(item.fontSize)">-->
              <!--<div class="line"></div>-->
              <!--<div class="point-wrapper">-->
                <!--<div class="point" v-show="defaultFontSize === item.fontSize">-->
                  <!--<div class="small-point"></div>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="line"></div>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="preview" :style="{fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px'}">A</div>-->
        <!--</div>-->
        <!--<div class="setting-theme" v-else-if="showTag === 1">-->
          <!--<div class="setting-theme-item" v-for="(item, index) in themeList" :key="index" @click="setTheme(index)">-->
            <!--<div class="preview" :style="{background: item.style.body.background}" :class="{'no-border': item.style.body.background !== '#fff'}"></div>-->
            <!--<div class="text" :class="{'selected': index === defaultTheme}">{{item.name}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="setting-progress" v-else-if="showTag === 2">-->
          <!--<div class="progress-wrapper">-->
            <!--<input class="progress" type="range"-->
                   <!--max="100"-->
                   <!--min="0"-->
                   <!--step="1"-->
                   <!--@change="onProgressChange($event.target.value)" @input="onProgressInput($event.target.value)"-->
                   <!--:value="progress"-->
                   <!--:disabled="!bookAvailable"-->
                   <!--ref="progress">-->
          <!--</div>-->
          <!--<div class="text-wrapper">-->
            <!--<span>{{bookAvailable ? progress + '%' : '加载中...'}}</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</transition>-->
  </div>
</template>

<script>
  import EbookSettingFont from './EbookSettingFont'
  import EbookSettingFontPopup from './EbookSettingFontPopup'
  import { EbookMixin } from '../../utils/mixin'
  export default {
    name: 'EbookMenu',
    components: {
      EbookSettingFont,
      EbookSettingFontPopup
    },
    mixins: [EbookMixin],
    methods: {
      showSetting (key) {
        this.setSettingVisible(key)
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/styles/global';
  .menu-bar {
    .menu-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 102;
      display: flex;
      width: 100%;
      height: px2rem(48);
      background: white;
      box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
      font-size: px2rem(20);

      &.hide-box-shadow {
        box-shadow: none;
      }

      .icon-wrapper {
        flex: 1;
        @include center;

        .icon-progress {
          font-size: px2rem(24);
        }

        .icon-bright {
          font-size: px2rem(22);
        }

      }
    }
  }
</style>
